<script setup>
  import { ref, watch, onMounted } from 'vue';
  import { useRoute, useRouter } from "vue-router";
  import Return from "@/components/common/Return.vue";

  let route = useRoute();
  let router = useRouter();

  // 登录方式 tag 标签选中样式动态变量
  let tag1 = ref(false);
  let tag2 = ref(false);
  let tag3 = ref(false);

  onMounted(() => {
    const suffix = route.path.substring(route.path.lastIndexOf("/"), route.path.length);
    switch (suffix) {
      case '/login':
      case '/password':
      case '/code':
        tag1.value = true;
        break
      case '/register':
        tag2.value = true;
        break;
      case '/reset':
        tag3.value = true;
        break
    }
  })

  const changeTag = (index) => {
    tag1.value = false;
    tag2.value = false;
    tag3.value = false;

    switch (index) {
      case 1:
        tag1.value = true;
        router.replace("/login/password");
        break;
      case 2:
        tag2.value = true;
        router.replace("/login/register");
        break;
      case 3:
        tag3.value = true;
        router.replace("/login/reset");
        break;
    }
  }

  //const getCode = () => {
  //  if(codeText.value === '获取验证码' || codeText.value === '重新获取验证码') {
  //    let seconds = 60;
  //    codeText.value = seconds + '秒后重新获取';
  //    const codeTimer = setInterval(function() {
  //      seconds--;
  //      codeText.value = seconds + '秒后重新获取';
  //      if(seconds === 1) {
  //        codeText.value = '重新获取验证码'
  //        clearInterval(codeTimer)
  //      }
  //    }, 1000)
  //  }
  //}

</script>
<template>

  <Return :color="true"/>

  <!-- 登录组件最外层盒子 -->
  <div class="login-biscuit">

    <!-- 登录组件背景颜色加深盒子 -->
    <div class="login-color-bold-basic">

      <!-- 登录表单盒子 -->
      <div class="login-form">

        <!-- 登录表单切换 tag 栏盒子 -->
        <div class="login-form-tag">

          <!-- tag1 -->
          <div @click="changeTag(1)"
               :class="['login-form-tag-item-basic', tag1 ? 'login-form-tag-item-yes-choose':'login-form-tag-item-not-choose']">
            <router-link :class="['login-form-tag-item-link', tag1 ? 'login-form-tag-item-link-yes-choose':'login-form-tag-item-link-not-choose']"
                         to="/login/password">登录</router-link>
          </div>

          <!-- tag2 -->
          <div @click="changeTag(2)"
               :class="['login-form-tag-item-basic', tag2 ? 'login-form-tag-item-yes-choose':'login-form-tag-item-not-choose']">
            <router-link :class="['login-form-tag-item-link', tag2 ? 'login-form-tag-item-link-yes-choose':'login-form-tag-item-link-not-choose']"
                         to="/login/register">注册</router-link>
          </div>

          <!-- tag3 -->
          <div @click="changeTag(3)"
               :class="['login-form-tag-item-basic', tag3 ? 'login-form-tag-item-yes-choose':'login-form-tag-item-not-choose']">
            <router-link :class="['login-form-tag-item-link', tag3 ? 'login-form-tag-item-link-yes-choose':'login-form-tag-item-link-not-choose']"
                         to="/login/reset">重置密码</router-link>
          </div>

        </div>

        <!-- 登录表单内容 -->
        <div class="login-form-content-basic">
          <router-view></router-view>
        </div>
      </div>

      <!-- 版本信息 -->
      <!--<div class="version">© 2024 饼干标签页v0.1 烤糊的饼干</div>-->
    </div>


  </div>
</template>
<style scoped>

  /* 登录组件最外层盒子基础样式 */
  .login-biscuit {
    width: 100vw;
    height: 100vh;
    position: relative;
    background-image: url(http://120.46.171.159:9000/biscuit-tag-page/global-background-image/backageImage1.jpeg);
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
  }

  /* 登录组件背景颜色加深盒子基本样式 */
  .login-color-bold-basic {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
  }


  /* 登录表单盒子样式 */
  .login-form {
    width: 420px;
    overflow: hidden;
    border-radius: 15px;
    padding: 30px;
    background-color: white;
  }
  /* 登录表单切换 tag 栏盒子样式 */
  .login-form-tag {
    width: 260px;
    padding: 4px;
    background-color: rgb(245, 245, 245);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 40px;
    color: rgb(95, 95, 95);
  }
  /* 登录标签切换 tag 项基础样式 */
  .login-form-tag-item-basic {
    padding: 6px 22px;
    font-size: 14px;
    cursor: pointer;
  }
  /* 登录标签切换 tag 项链接样式 */
  .login-form-tag-item-link {
    text-decoration: none;
  }

  /* 登录表单内容盒子基础样式 */
  .login-form-content-basic {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }


  /* 登录标签切换 tag 项选中动态样式 */
  .login-form-tag-item-yes-choose {
    background-color: white;
  }
  .login-form-tag-item-not-choose {
    background-color: transparent;
  }

  /* 登录标签切换 tag 项链接选中动态样式 */
  .login-form-tag-item-link-yes-choose {
    color: rgb(0, 102, 204);
  }
  .login-form-tag-item-link-not-choose {
    color: rgb(38, 38, 38);
  }



  .user-content .user-content-color .user-form .tag>div {
    padding: 6px 22px;
    font-size: 14px;
    cursor: pointer;
    transition: all .3s;
  }
  .user-content .user-content-color .user-form input {
    border-radius: 5px;
    outline: none;
    border: 1px solid white;
    background-color: rgb(242, 242, 242);
    line-height: 42px;
    width: 100%;
    text-indent: 10px;
    font-size: 16px;
    margin-bottom: 20px;
    transition: border .3s;
  }
  .user-content .user-content-color .user-form input:hover {
    border: 1px solid rgb(217, 217, 217);
  }
  .user-content .user-content-color .user-form input:focus {
    border: 1px solid rgb(0, 102, 224);
  }

  .user-content .user-content-color .user-form button {
    width: 100%;
    background-color: rgb(0, 102, 204);
    border: none;
    line-height: 42px;
    border-radius: 5px;
    font-size: 16px;
    color: white;
    cursor: pointer;
    transition: background-color .2s;
  }
  .user-content .user-content-color .user-form button:hover {
    background-color: rgb(0, 112, 224);
  }

  .user-content .user-content-color .user-form .verification-code {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
  }
  .user-content .user-content-color .user-form .verification-code input {
    width: 60%;
  }
  .user-content .user-content-color .user-form .verification-code .code {
    width: 36%;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(0, 102, 204);
    background-color: rgb(229, 239, 250);
    transition: all .2s;
    border-radius: 5px;
    cursor: pointer;
  }

  .user-content .user-content-color .user-form .verification-code .code:hover {
    background-color: rgb(0, 112, 224);
    color: white;
  }

  .user-content .user-content-color .version {
    color: rgb(105, 110, 122);
    font-size: 12.5px;
    position: absolute;
    right: 20px;
    bottom: 20px;
  }

</style>